<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/img/admin.png}">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script th:src="@{/js/jquery-3.4.1.min.js}"></script>
</head>
<body>
<table border="1">
    <thead>
    <th>employee_id</th>
    <th>first_name</th>
    <th>last_name</th>
    <th>email</th>
    <th>修改</th>
    <th>删除</th>
    </thead>
    <tbody>
    <tr th:each="employee : ${employees}">
        <td th:text="${employee.employeeId}"></td>
        <td th:text="${employee.firstName}"></td>
        <td th:text="${employee.lastName}"></td>
        <td th:text="${employee.email}"></td>
        <td><a th:href="'/employees/edit?id=' + ${employee.employeeId}">修改</a></td>
        <td>
            <button type="button" th:attr="onclick=|deleteCustomer(this, '${employee.employeeId}')|" >删除</button>
        </td>
    </tr>
    </tbody>
</table>
</body>
<script>
    function  deleteCustomer(elem, id) {
        $.ajax(
            {
                url: "/employees/delete?id=" + id,
                type: "delete",
                success: function (data) {
                    if(data == true) {
                        $(elem).parent().parent().remove();
                    } else {
                        console.log("失败");
                    }
                },
                fail: function (data) {
                    console.log(data);
                }
            }
        )
    }
</script>
</html>